<template>
  <div class="main-spot">
    <div class="part thumb">
      <div class="top-img">
        <img v-lazy="publicUrl(props.item.img)" />
      </div>
      <div class="bottom">
        <div class="title overOne">面料：{{ props.item.serial }}</div>
        <div class="tag overOne">类型：{{ props.item.type }}</div>
        <div class="tag overOne">成分：{{ props.item.makeup }}</div>
        <div class="tag overOne">色系：{{ props.item.color }}</div>
        <div class="tag overOne">弹力：{{ props.item.elastic }}</div>
        <div class="tag overOne">产地：{{ props.item.place }}</div>
        <div class="tag overOne">适合季节：{{ props.item.season }}</div>
      </div>
      <div class="foot">
        <div class="part">价格:</div>
        <div class="part part-else overOne">
          <span class="price overOne">￥{{ props.item.price }}</span
          >元/每米
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { publicUrl } from "@/utils/util";
import {FabricItem} from "./interface";
interface Props {
  item: FabricItem;  //面料数据
}

const props = withDefaults(defineProps<Props>(), {
  item: () => {
    return {
      fabric_id:0,
      img: "",
      serial: "",
      type: "",
      makeup: "",
      color: "",
      elastic: "",
      place: "",
      season: "",
      price: 0,
    };
  },
});
</script>
<style scoped lang="scss">
  @import "./index.scss";
</style>
